<template>
  <div class="main-container">
    <div class="content-left">
      <div class="left-container-top" @click="back">
        <svg
          width="12"
          height="23"
          viewBox="0 0 17 28"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12.816 27.1456C13.4813 27.2521 14.1971 27.2206 14.812 26.9349C16.0417 26.3616 16.4007 25.133 15.6005 24.2357L6.13011 13.6057L15.9192 3.26836C16.7463 2.39584 16.4247 1.15683 15.2131 0.546425C14.0014 -0.0620508 12.2964 0.158828 11.469 1.03327L0.667337 12.4389C0.062737 13.0757 0.0494345 13.951 0.634404 14.6059L11.0845 26.3345C11.4847 26.7841 12.151 27.0391 12.816 27.1456Z"
            fill="#FF5F04"
          />
        </svg>
      </div>
      <el-card shadow="never" class="left-box-card-top">
        <div
          class="content-left-commStyle"
          :style="{
            background: `url(${backgroundImage}) no-repeat center/cover`
          }"
        >
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8081/attachment/upload"
            :show-file-list="false"
            :on-change="handleChange"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeUpload"
            :headers="headerObject"
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
      </el-card>
      <el-card
        shadow="hover"
        class="left-box-card-bottom"
        style="display: flex;"
      >
        <div>
          <svg
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M7.25337 7C8.14138 3.54955 11.2733 1 15.0007 1C19.4186 1 23 4.58172 23 9C23 12.5225 20.7236 15.5133 17.5617 16.5812M16.9986 15C16.9986 19.4183 13.4172 23 8.99932 23C4.58142 23 1 19.4183 1 15C1 10.5817 4.58142 7 8.99932 7C13.4172 7 16.9986 10.5817 16.9986 15Z"
              stroke="#4A4848"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
          <span style="margin-left: 5px;">{{ $t("home.matchBrand") }}</span>
          <div style="margin-left: 20px;margin-top: 20px;">
            <el-select
              popper-class="radius-select"
              v-model="saveUpdateUserBankQo.vendorId"
              filterable
              placeholder="search..."
              @change="vendorChange"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
              <template #prefix>
                <i class="el-icon-search" style="margin-left: 10px;" />
              </template>
            </el-select>
          </div>
        </div>
      </el-card>
    </div>
    <div class="content-middle">
      <el-card shadow="hover" class="middle-box-card">
        <el-form style="width: 100%;" label-width="120px" ref="loginForm">
          <el-form-item :label="$t('home.name')" prop="account">
            <el-input
              v-model="userDetailInfo.userName"
              :placeholder="$t('home.namePlaceholder')"
              maxlength="50"
              show-word-limit
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('login.email')" prop="email">
            <el-input
              v-model="userDetailInfo.email"
              :placeholder="$t('login.emailPlaceholder')"
              maxlength="50"
              show-word-limit
              clearable
              :disabled="true"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="Brand" prop="brand">
            <el-input v-model="vendor.vendor" maxlength="50" show-word-limit clearable></el-input>
          </el-form-item> -->
          <!-- <el-form-item :label="$t('home.promoCode')" prop="account">
            <el-input v-model="form.bankName" :placeholder="$t('home.promoCodePlaceholder')" maxlength="50"
              show-word-limit clearable></el-input>
          </el-form-item> -->
        </el-form>
        <!-- <div class="content-middle-upload">
          <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div> -->
        <div>
          <i class="el-icon-s-grid">Brand Introduction</i>
          <el-input
            type="textarea"
            :rows="5"
            placeholder="Introduce your brand......"
            v-model="saveUpdateUserBankQo.remark"
            @input="$forceUpdate()"
          >
          </el-input>
        </div>
      </el-card>
    </div>
    <div class="content-right">
      <el-card shadow="hover" class="right-box-card">
        <el-form
          style="width: 100%;"
          label-position="top"
          label-width="80px"
          ref="loginForm"
        >
          <div
            style="display: flex; justify-content: center; align-items: center;caret-color: transparent;"
          >
            {{ $t("home.paymentMethods") }}
          </div>
          <div class="payment-method">
            <div
              class="payplay-button"
              :style="{
                background: `url(${paypalImageUrl}) no-repeat center/cover`
              }"
              @click="changePayMethod('payplay')"
            ></div>
            <div
              class="wire-button"
              :style="{
                background: `url(${wireImageUrl}) no-repeat center/cover`
              }"
              @click="changePayMethod('wire')"
            ></div>
          </div>
          <el-divider />
          <img
            v-if="userBank.bankType == 1"
            style="height: 18%;width:30%;"
            src="../../assets/img/PayPal.png"
          />
          <img
            v-if="userBank.bankType == 2"
            style="height: 18%;width:32%;"
            src="../../assets/img/WireTransfer.png"
          />
          <el-divider />
          <el-form-item
            v-if="userBank.bankType == 1"
            :label="$t('home.beneficiaryName')"
            prop="account"
          >
            <el-input
              v-model="userBank.beneficiaryName"
              :placeholder="$t('home.beneficiaryNamePlaceholder')"
              maxlength="50"
              show-word-limit
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="userBank.bankType == 1"
            :label="$t('home.accountNo')"
            prop="account"
          >
            <el-input
              v-model="userBank.bankAccount"
              :placeholder="$t('home.accountNoPlaceholder')"
              maxlength="50"
              show-word-limit
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="userBank.bankType == 1"
            :label="$t('home.bankName')"
            prop="account"
          >
            <el-input
              v-model="userBank.bankName"
              :placeholder="$t('home.bankNamePlaceholder')"
              maxlength="50"
              show-word-limit
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="userBank.bankType == 1"
            :label="$t('home.bankAddress')"
            prop="account"
          >
            <el-input
              v-model="userBank.bankAddress"
              :placeholder="$t('home.bankAddressPlaceholder')"
              maxlength="50"
              show-word-limit
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="userBank.bankType == 1"
            :label="$t('home.swiftCode')"
            prop="password"
          >
            <el-input
              v-model="userBank.swiftCode"
              :placeholder="$t('home.swiftCodePlaceholder')"
              maxlength="50"
              show-word-limit
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="userBank.bankType == 2"
            :label="$t('login.email')"
            prop="password"
          >
            <el-input
              v-model="userBank.email"
              :placeholder="$t('login.emailPlaceholder')"
              maxlength="50"
              show-word-limit
              clearable
            ></el-input>
          </el-form-item>
        </el-form>
      </el-card>
      <div>
        <el-button
          :loading="submitLoading"
          @click="submitForm"
          style="background-color: #F86704; color: white; width: 100%;margin-top: 8%;"
          >{{ $t("home.submit") }}</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import { queryUserInfoRoleById, saveUpdateUserBank } from "@/api/userService";
import { queryVendorList } from "@/api/vendorService";

export default {
  components: {},
  data() {
    return {
      submitLoading: false,
      options: [],
      userDetailInfo: {},
      userBank: {},
      vendor: {},
      backgroundImage: "",
      userId: "",
      paypalImageUrl: require("../../assets/img/PayPalOn.png"),
      wireImageUrl: require("../../assets/img/WireTransferOff.png"),
      saveUpdateUserBankQo: { satoken: localStorage.getItem("satoken") },
      cacheVendorList: [],
      headerObject: { satoken: localStorage.getItem("satoken") }
    };
  },
  methods: {
    async submitForm() {
      this.saveUpdateUserBankQo.userId = this.userId;
      this.saveUpdateUserBankQo.bankType = this.userBank.bankType;
      this.saveUpdateUserBankQo.beneficiaryName = this.userBank.beneficiaryName;
      this.saveUpdateUserBankQo.bankName = this.userBank.bankName;
      this.saveUpdateUserBankQo.bankAddress = this.userBank.bankAddress;
      this.saveUpdateUserBankQo.bankAccount = this.userBank.bankAccount;
      this.saveUpdateUserBankQo.swiftCode = this.userBank.swiftCode;
      this.saveUpdateUserBankQo.userName = this.userDetailInfo.userName;
      this.saveUpdateUserBankQo.avatarUrl = this.userDetailInfo.avatarUrl;
      this.options.filter(item => {
        if (item.value == this.saveUpdateUserBankQo.vendorId) {
          this.saveUpdateUserBankQo.vendor = item.label;
          return;
        }
      });
      if (/^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(this.userBank.email) == false) {
        this.$message.error(this.$t('login.emailCheck'));
        return;
      }
      this.saveUpdateUserBankQo.email = this.userBank.email;
      this.submitLoading = true;

      await saveUpdateUserBank(this.saveUpdateUserBankQo).then(res => {
        if (res.code == 200) {
          this.$message.success(this.$t("home.operationSuccess"));
          this.submitLoading = false;
          this.$router.go(-1);
        } else {
          this.$message.error(res.msg);
          this.submitLoading = false;
        }
      });
    },
    onReset() {
      this.$refs.form.resetFields();
    },
    handleAvatarSuccess(res, file) {
      if (res) {
        this.userDetailInfo.avatarUrl = res;
      } else {
        this.$message.error(this.$t("home.operationError"));
      }
    },
    back() {
      this.$router.go(-1);
    },
    changePayMethod(method) {
      if (method == "payplay") {
        this.userBank.bankType = 1;
        this.paypalImageUrl = require("../../assets/img/PayPalOn.png");
        this.wireImageUrl = require("../../assets/img/WireTransferOff.png");
      } else {
        this.userBank.bankType = 2;
        this.paypalImageUrl = require("../../assets/img/PayPalOff.png");
        this.wireImageUrl = require("../../assets/img/WireTransferOn.png");
      }
    },
    beforeUpload(file, fileList) {
      const isLt2M = file.size / 1024 / 1024 < 10;
      const fileExtension = file.name
        .split(".")
        .pop()
        .toLowerCase();

      if (
        fileExtension != "png" &&
        fileExtension != "jpeg" &&
        fileExtension != "jpg"
      ) {
        this.$message.error(
          "Uploading avatar images can only be in JPG or PNG format!"
        );
        return;
      }
      if (!isLt2M) {
        this.$message.error(
          "The size of the uploaded avatar image cannot exceed 10MB!"
        );
        return;
      }
    },
    handleChange(file, fileList) {
      fileList.forEach(element => {
        this.backgroundImage = URL.createObjectURL(element.raw);
      });
    },
    async getUserInfoRoleById() {
      await queryUserInfoRoleById(this.userId).then(res => {
        if (res.code === 200) {
          this.userDetailInfo = res.data;
          if (res.data.userBank) {
            this.userBank = res.data.userBank;
          }
          if (this.userDetailInfo.avatar) {
            this.backgroundImage = this.userDetailInfo.avatar;
          } else {
            this.backgroundImage = require("../../assets/img/userInfoUpload.jpg");
          }
          this.userBank.bankType == 1
            ? this.changePayMethod("payplay")
            : this.changePayMethod("wire");
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    async getVendorList() {
      await queryVendorList().then(res => {
        if (res.code === 200) {
          this.cacheVendorList = res.data;
          for (let i = 0; i < this.cacheVendorList.length; i++) {
            var obj = {
              value: this.cacheVendorList[i].vendorId,
              label: this.cacheVendorList[i].vendor
            };
            this.options.push(obj);
            if (
              this.saveUpdateUserBankQo.vendorId ==
              this.cacheVendorList[i].vendorId
            ) {
              this.saveUpdateUserBankQo.remark = this.cacheVendorList[i].remark;
            }
          }
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    vendorChange() {
      this.cacheVendorList.filter(item => {
        if (item.vendorId == this.saveUpdateUserBankQo.vendorId) {
          this.saveUpdateUserBankQo.remark = item.remark;
          this.$forceUpdate();
        }
      });
    }
  },
  mounted() {
    this.userId = this.$route.params.id;
    this.saveUpdateUserBankQo.vendorId = this.$route.params.vendorId;
    this.getUserInfoRoleById();
    this.getVendorList();
  }
};
</script>

<style scoped>
@import "../../assets/css/AdminInformation.css";
</style>
